<template>
	<div class="Address" :class="{inView: inView}">
		<ul class="address_name" >
			<li class="ilbk" v-for="i in 4" :key="i">
				<span class="split_line" v-if="i !== 1">/</span>
				<span v-text="addressName[i - 1]"></span>
			</li>
		</ul>
		<div class="address_text_box">
			<span class="address_text"
				v-text="addressText[0]"
			/>
		</div>
	</div>
</template>

<script>
import Lang from "./lang.js";
export default {
	name: "Caddress",
	data() {
		return {
            langSelects: [{ value: 0, txt: "简体中文" }, { value: 1, txt: "English" }],
            inView: false,
		};
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang;
		},
		addressName() {
			let lang = this.lang;
			return Lang.addressName[lang];
		},
		addressText(){
			let lang = this.lang;
			return Lang.addressText[lang];
		}
    },
    mounted() {
        let se = ".Address"
        let dom = document.querySelector(se)
        var io = new IntersectionObserver(entries => {
            let isIn = entries[0].intersectionRatio !== 0;
            if (isIn) {
                showed();
            } else {
                disappeared();
            }
        });
        io.observe(dom);
        let showed = () => {
            this.inView = true;
        };
        let disappeared = () => {
            // this.inView = false;
        };
    }
};
</script>

<style scoped>
.Address {
	height: 485px;
	background: url("./service_night.3f74730.png") no-repeat center 100%;
    opacity: 0;
}
.address_name {
	padding-top: 150px;
	text-align: center;
	line-height: 48px;
	font-size: 28px;
	color: #c7cce6;
}
.inView {
    opacity: 1;
    transition: opacity 5s;
}
.split_line {
	opacity: 0.5;
	padding: 0 10px;
}
.address_text_box {
	margin-top: 35px;
	height: 302px;
	text-align: center;
	white-space: pre;
}
.address_text {
	line-height: 25px;
	font-size: 18px;
	color: #a7b6c8;
}
.address_text::before,
.address_text::after {
	content: "    ————————————    "
}
</style>
